<template>
  <div class="detail">
    <el-row class="title">
      <p>{{ list.title }}</p>
      <span class="star" style="display:flex">
        <el-rate
          v-model="list.score"
          disabled
          show-score
          text-color="#999"
          score-template="{value}分"
        >
        </el-rate>
        <span class="price">人均￥{{ list.avgPrice }}</span>
        <span class="wx"> <img src="../../assets/img/wx.png" alt=""> 分享到微信</span>
      </span>
    </el-row>
    <el-row class="row-2">
      <el-col>地址: {{ list.address }}</el-col>
      <el-col>电话: {{ list.phone }}</el-col>
      <el-col class="timer">营业时间: {{ list.businessTime }}</el-col>
    </el-row>
    <el-row class="tcw">
      <img src="../../assets/img/tcw1.png" alt="">
      <p>有停车位</p>
    </el-row>
  </div>
</template>

<script>
export default {
  props: ['list'],
};
</script>

<style lang="scss" scoped>
.detail {
  padding: 20px 20px;
  .tcw{
    img{
      width: 80px;
      height: 80px;
    }
    p{
      margin-left: 10px;
    }
  }
  .title {
    border-bottom: 1px solid #999;
    p{
      font-weight: 500;
      margin-bottom: 10px;
    }
    .star{
      margin-bottom: 10px;
      img{
        width: 30px;
        height: 30px;
        vertical-align: middle;
      }
      .wx{
        margin-left: 560px;
        color: #999;
      }
    }
  }
  .price {
    color: #999;
    font-size: 13px;
    margin-left: 3px;
  }
  .timer {
    padding-bottom: 15px;
    border-bottom: 1px solid #999;
  }
  .row-2 {
    padding: 15px 0px;
    color: #999;
    height: 100%;
  }
  .el-col {
    margin-bottom: 10px;
  }
}
</style>
